import { useState } from 'react';
import { cloneDeep } from 'lodash';
import { Button, NavBar, Popup, List, Toast } from 'antd-mobile';
import { getPageString, getM } from '@inbiz/utils';
import { TextWidget, getMessage } from '@inbiz/react';
import { useInbizRouter } from '@inbiz/hooks';
import { routerPrefix } from 'InbizConfig';
import '../index.less';

const toggleSelect = (bool: boolean, list: { taskId: string }[], callback: Function) => {
  let _selectItem = list?.map((item2: any) => item2?.taskId);
  if (bool) {
    callback(_selectItem);
  } else {
    callback([]);
  }
};

export default function Operations(props: any) {
  const history = useInbizRouter();
  const { selectItem, list, $selectItem } = props;
  const checkedItems = list?.filter((item: { taskId: string }) => selectItem?.includes(item?.taskId));
  const [visible, $visible] = useState(false);

  const setApprovalList = () => {
    sessionStorage.setItem('batchApproval', 'batchApproval');
    if (checkedItems.length == 0) {
      return Toast.show({ content: getMessage('processCenter.selectOneData') });
    } else {
      if (checkedItems?.length > 5) {
        Toast.show({ content: getMessage('processCenter.fiveDataToApprove') });
      }
      const arr = cloneDeep(checkedItems).slice(0, 5);
      localStorage.removeItem('lastLocation');
      localStorage.setItem('lastLocation', JSON.stringify(window.location));
      localStorage.setItem('approvalList', JSON.stringify(arr));
      history.push(`${routerPrefix}${getPageString()}/approval?type=mobile&tabKey=2`);
    }
  };

  return (
    <div>
      <footer className={'operationFooter'} style={{ width: '100%' }}>
        <div>
          {list?.length !== selectItem?.length && (
            <Button
              color="primary"
              fill="none"
              onClick={() => toggleSelect(true, list, $selectItem)}
            >
              <TextWidget>processCenter.selectAll</TextWidget>
            </Button>
          )}
          {list?.length == selectItem?.length && (
            <Button
              color="primary"
              fill="none"
              onClick={() => toggleSelect(false, list, $selectItem)}
            >
              <TextWidget>processCenter.cancelSelectAll</TextWidget>
            </Button>
          )}
          {Boolean(checkedItems?.length) && (
            <span
              className={'selectedNumber'}
              title={`${getMessage('processCenter.haveselected')}${checkedItems?.length
                }${getMessage('processCenter.item')}`}
            >
              <TextWidget>processCenter.haveselected</TextWidget>
              {checkedItems?.length}
              <TextWidget>processCenter.item</TextWidget>
            </span>
          )}
        </div>
        <div>
          <Button
            color="primary"
            onClick={() => {
              $visible(true);
            }}
          >
            <TextWidget>processCenter.assign</TextWidget>
          </Button>
          <Button color="primary" onClick={setApprovalList}>
            <TextWidget>processCenter.batchApproval</TextWidget>
          </Button>
        </div>
      </footer>
      <Popup
        visible={visible}
        onMaskClick={() => $visible(false)}
        bodyClassName={'process-center-h5-assign-popup'}
      >
        <>
          <header className={'popupHeader'}>
            <NavBar
              onBack={() => $visible(false)}
              backArrow={
                <a>
                  <TextWidget>global.cancel</TextWidget>
                </a>
              }
            >
              <TextWidget>processCenter.assign</TextWidget>
            </NavBar>
          </header>
          <section className={'popupBody'}>
            <List>
              <List.Item
                arrow={false}
                key={1}
                onClick={() => {
                  if (checkedItems?.length == 0) {
                    return Toast.show({ content: getMessage('processCenter.selectOneData') });
                  }
                  const ids = checkedItems?.map((ele) => ele.taskId).join(',');
                  history.push({
                    pathname: `${routerPrefix}${getPageString()}/setassign`,
                    query: {
                      ids: ids,
                      type: '1',
                    },
                  });
                }}
              >
                <TextWidget>processCenter.currentAssign</TextWidget>
              </List.Item>
              <List.Item
                onClick={() => {
                  history.push({
                    pathname: `${routerPrefix}${getPageString()}/setassign`,
                    query: {
                      type: '2',
                    },
                  });
                }}
                arrow={false}
                key={2}
              >
                <TextWidget>processCenter.willAssign</TextWidget>
              </List.Item>
            </List>
          </section>
        </>
      </Popup>
    </div>
  );
}
